<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <div class="box">
        <!-- 左边 -->
        <div class="left">
            姓名<input type="input" placeholder="请输入姓名" class="uname">
            评分<input type="number" placeholder="请输入评分" class="uname1">
            薪资 <input type="number" placeholder="请输入薪资" class="uname2">
            <button>添加</button>

            <table width='450px' ,height='50px' border="1">
                <thead>
                    <tr>
                        <th>姓名</th>
                        <th>评分</th>
                        <th>薪资</th>
                    </tr>

                </thead>
                <!-- <tbody>
                    <tr>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                </tbody> -->
            </table>
        </div>

        <script>


            let table = document.querySelector('table')
            let tbody = document.createElement('tbody')
            let btn = document.querySelector('button')
            let user = document.querySelector('.uname')
            let user1 = document.querySelector('.uname1')
            let user2 = document.querySelector('.uname2')
            // 把 tbody追加到 table
            table.appendChild(tbody)
            btn.addEventListener('click', function () {
                if (user.value === '' || user1.value === '' || user2.value === '') return
                // 创建tr 
                tr = document.createElement('tr')
                // 追加到tbody里
                tbody.appendChild(tr)
                // 把 td 放入tr中
                tr.innerHTML = `<td>${user.value}</td>
                        <td> ${user1.value}</td>
                            <td>${user2.value}</td>
                `

                user.value = ''
                user1.value = ''
                user2.value = ''
                fn()
                ddta()
                pingfei()
                xinzi()
                console.log(data1)
                console.log(xinzi1)
                console.log(pingfei1)
                tu1()
                tu2()
            })
            let data = []
            let obj = {}
            function fn() {
                data = []
                let trs = document.querySelectorAll(' tbody tr')
                for (let i = 0; i < trs.length; i++) {

                    obj = { username: trs[i].childNodes[0].innerHTML, score: trs[i].childNodes[2].innerHTML, salary: trs[i].childNodes[4].innerHTML }
                    // console.log(trs[i].childNodes[0].innerHTML);
                    data.push(obj)
                }

            }

            let data1 = []
            function ddta() {
                data1 = []
                for (let i = 0; i < data.length; i++) {
                    data1.push(data[i].username)
                }

            }
            let pingfei1 = []
            function pingfei() {
                pingfei1 = []
                for (let i = 0; i < data.length; i++) {
                    pingfei1.push(data[i].score)
                }

            }
            let xinzi1 = []
            function xinzi() {
                xinzi1 = []
                for (let i = 0; i < data.length; i++) {
                    xinzi1.push(data[i].salary)
                }

            }
        </script>

        <!-- 右边 -->
        <div class="right">
            <div class="top">1</div>
            <div class="bottom">2</div>
        </div>
    </div>

    <script src="./js/jquery-3.6.0.js"></script>
    <script src="./echarts.min.js"></script>
    <script src="./js/项目.js"></script>


</body>

</html>